'use strict';
//属性
var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});


//全选不全选复选框的click事件,由于全选和不全选的复选框是同一个，所以要判断他们的状态
selectAll.on('click', function(){
    if (selectAllLabel.is(":visible")) {
        langs.prop('checked', true);//判断是否全选
        selectAllLabel.hide();//隐藏
        deselectAllLabel.show();//显示
    }else{
        langs.prop('checked', false);
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
});


//反选标签的click事件
invertSelect.on('click', function(){
    //langs里面每个元素的checked属性都与原来的相反，即!$(this).prop('checked')
    langs.map(function(){
        $(this).prop('checked', !$(this).prop('checked'));
    });//判断选中，并反选
    //顺便也要判断一下全选还是不全选
    if(langs.filter(':checked').length == 5){
            //全选复选框勾上
            selectAll.prop('checked', true);
            selectAllLabel.hide();
            deselectAllLabel.show();
    }else{
        selectAll.prop('checked', false);
        selectAllLabel.show();
        deselectAllLabel.hide();
    }
});

//当改变选择情况就会再次判断是否为全选情况
langs.map(function(){
    //当每个元素文本内容或选项被更改时都要触发change()函数检查全选和不全选的状态
    $(this).change(function(){
        //当全部选上了
        console.log(langs.filter(':checked').length)
        if(langs.filter(':checked').length == 5){
            //全选复选框勾上
            selectAll.prop('checked', true);
            selectAllLabel.hide();
            deselectAllLabel.show();
        }
        else{
            selectAll.prop('checked', false);
            selectAllLabel.show();
            deselectAllLabel.hide();
        }
    });
})
